<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64"
        class="el-menu-vertical-demo" default-active="2" text-color="#fff"
        style="height: 100%;">
        <!-- <el-sub-menu index="1">
            <template #title>
                <span>用户管理</span>
            </template>
            <el-menu-item index="1-1" @click="navTo('EmployeeUserCreation')">员工用户创建</el-menu-item>
            <el-menu-item index="1-2" @click="navTo('UserQuery')">用户查询显示</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
            <template #title>
                <span>菜单管理</span>
            </template>
            <el-menu-item index="2-1" @click="navTo('AddRoleModule')">新增菜单</el-menu-item>
            <el-menu-item index="2-2" @click="navTo('AddCharacterMenu')">菜单角色添加</el-menu-item>
            <el-menu-item index="2-3" @click="navTo('MenuDisplay')">菜单显示</el-menu-item>
            <el-menu-item index="2-5" @click="navTo('MenuPermissions')">动态菜单权限</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="8">
            <template #title>
                <span>角色管理</span>
            </template>
            <el-menu-item index="8-1" @click="navTo('AddRole')">角色添加</el-menu-item>
            <el-menu-item index="8-3" @click="navTo('ShowRoleList')">角色显示</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="9">
            <template #title>
                <span>功能管理</span>
            </template>
            <el-menu-item index="9-1" @click="navTo('AddFunction')">添加功能</el-menu-item>
            <el-menu-item index="9-2" @click="navTo('FunctionalPermissions')">根据菜单id查询功能权限</el-menu-item>
        </el-sub-menu>

  <el-sub-menu index="6">
            <template #title>
                <span>基础信息</span>
            </template>
            <el-menu-item index="6-1" @click="navTo('LineList')">线路管理</el-menu-item>
           <el-menu-item index="6-2" @click="navTo('CargoOwnerList')">货主管理</el-menu-item>
               <el-menu-item index="6-3" @click="navTo('FuelCostList')">油费管理</el-menu-item>
                  <el-menu-item index="6-4" @click="navTo('VehicleList')">车辆管理</el-menu-item>
                  <el-menu-item index="6-5" @click="navTo('OutsourcedUnitsList')">外协单位管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
            <template #title>
                <span>人事管理</span>
            </template>
            <el-menu-item index="5-1" @click="navTo('RegisterBoard')">人事看板</el-menu-item>
            <el-menu-item index="5-2" @click="navTo('RegisterView')">员工登记</el-menu-item>
            <el-menu-item index="5-3" @click="navTo('EntryView')">入职办理</el-menu-item>
            <el-menu-item index="5-4" @click="navTo('ResignationView')">离职办理</el-menu-item>
            <el-menu-item index="5-5" @click="navTo('FullView')">转正办理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
            <template #title>
                <span>合同管理</span>
            </template>
            <el-menu-item index="3-1" @click="navTo('ContractHshow')">货主合同管理</el-menu-item>
            <el-menu-item index="3-2" @click="navTo('ContractCshow')">承运合同管理</el-menu-item>
            <el-menu-item index="3-3" @click="navTo('ContractTshow')">通用合同管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
            <template #title>
                <span>结算管理</span>
            </template>
            <el-menu-item index="4-1" @click="navTo('FeesExpensesShow')">应付费用管理</el-menu-item>
            <el-menu-item index="4-2" @click="navTo('ChargeableExpensesShow')">应收费用管理</el-menu-item>
            <el-menu-item index="4-3" @click="navTo('InputInvoiceShow')">进项发票管理</el-menu-item>
            <el-menu-item index="4-4" @click="navTo('OutputInvoiceShow')">销项发票管理</el-menu-item>
            <el-menu-item index="4-5" @click="navTo('PaymentShow')">付费管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
            <template #title>
                <span>物资管理</span>
            </template>
            <el-menu-item index="7-1" @click="navTo('ShowMaterial')">物资采购</el-menu-item>
            <el-menu-item index="7-2" @click="navTo('ShowStore')">入库管理</el-menu-item>
            <el-menu-item index="7-3" @click="navTo('ShowMaterialRequisition')">物资领用</el-menu-item>
            <el-menu-item index="7-4" @click="navTo('ShowMaterialStatistics')">物资统计</el-menu-item>
        </el-sub-menu> -->

        <div v-for="item in MenuPermissionsData" :key="item.value">
          <el-sub-menu :index="item.menu_url">
            <template #title>
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.label }}</span>
              </template>
              <el-menu-item v-for="items in item.children" :key="items.value" @click="GoInfo(items.value,items.menu_url)">
                  <el-icon><icon-menu /></el-icon>{{ items.label }}
                </el-menu-item>
          </el-sub-menu> 
        </div>
        </el-menu>

        <!-- GoInfo(items.value,items.menu_url) -->
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import { Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'
const router = useRouter();

onMounted(() => {
  getMenuPermissionsList()
})

//跳转菜单页面
const GoInfo = (value: number, menu_url: string) => {
  //console.log(value, menu_url);
  
  router.push({
    name: menu_url,
    params: {
      id: value
    }
  })
}

//动态菜单
const MenuPermissionsData:any=ref([])
const getMenuPermissionsList =()=>{
  axios.get('http://1.117.93.87:8000/rbacdu/api/Menu/MenuTreeShowByRoleId').then(res=>{
    //console.log(res);
    MenuPermissionsData.value = res.data.data;
    //console.log(MenuPermissionsData.value[0].menu_url);
    
  }).catch(err=>{
    console.log(err);
    
  })    
}



</script>